import 'package:flutter/material.dart';

class GridNav extends StatelessWidget {
  final gridData;

  const GridNav({Key key, @required this.gridData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 5, right: 5),
      child: PhysicalModel(
          color: Colors.transparent,
          borderRadius: BorderRadius.circular(8),
          clipBehavior: Clip.antiAlias,
          child: Column(
            children: _gridNavItems(context),
          )),
    );
  }

  _gridNavItems(BuildContext context) {
    List<Widget> items = [];
    if (gridData == null) return items;
    items.add(_gridNavItem(context, gridData['hotel'], true));
    items.add(_gridNavItem(context, gridData['flight'], false));
    items.add(_gridNavItem(context, gridData['travel'], false));
    return items;
  }

  _gridNavItem(BuildContext context, gridNavItem, first) {
    List<Widget> items = [];
    items.add(Expanded(
      child: _mainItem(context, gridNavItem['mainItem']),
      flex: 1,
    ));
    items.add(Expanded(
        child: _doubleItem(context, gridNavItem['item1'], gridNavItem['item2']),
        flex: 1));
    items.add(Expanded(
        child: _doubleItem(context, gridNavItem['item3'], gridNavItem['item4']),
        flex: 1));
    Color startColor = Color(int.parse('0xff' + gridNavItem['startColor']));
    Color endColor = Color(int.parse('0xff' + gridNavItem['endColor']));
    return Container(
      height: 88,
      child: Row(children: items),
      decoration: BoxDecoration(
          gradient: LinearGradient(colors: [startColor, endColor])),
      margin: first ? null : EdgeInsets.only(top: 3),
    );
  }

  _mainItem(BuildContext context, model) {
    return GestureDetector(
      onTap: () {},
      child: Stack(alignment: AlignmentDirectional.topCenter, children: [
        Image.network(
          model['icon'],
          fit: BoxFit.contain,
          height: 88,
          width: 121,
          alignment: AlignmentDirectional.bottomEnd,
        ),
        Container(
          child: Text(
            model['title'],
            style: TextStyle(color: Colors.white, fontSize: 14),
          ),
          margin: EdgeInsets.only(top: 11),
        )
      ]),
    );
  }

  _doubleItem(BuildContext context, topItem, bottomItem) {
    return Column(
      children: [
        Expanded(child: _item(context, topItem, true)),
        Expanded(child: _item(context, bottomItem, false))
      ],
    );
  }

  _item(BuildContext context, item, first) {
    BorderSide borderSide = BorderSide(width: 0.8, color: Colors.white);
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        decoration: BoxDecoration(
            border: Border(
                left: borderSide,
                bottom: first ? borderSide : BorderSide.none)),
        child: Center(
          child: Text(
            item['title'],
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 14, color: Colors.white),
          ),
        ),
      ),
    );
  }
}
